<template>
  <div>
    <!-- node-key="id" 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
         check-strictly 父子不互相关联 (在显示复选框的情况下)
     -->
    <el-tree ref="refTree" node-key="id" show-checkbox default-expand-all check-strictly :data="list" :props="{label:'name'}" />

    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="hSubmit">确定</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getPermissionList } from '@/api/permissions'
import { tranListToTreeData } from '@/utils'
import { assignPerm, getRoleDetail } from '@/api/roles'
export default {
  props: {
    roleId: {
      required: true,
      type: String
    }
  },
  data: function() {
    return {
      list: []
    }
  },
  created() {
    this.loadPermissionList()
    this.loadRoleDetailById()
  },
  methods: {
    async loadPermissionList() { // 获取所有权限点, 并渲染成树型结构
      const res = await getPermissionList().catch(e => e)
      if (!res.success) return

      // 分配权限 要使用 树型结构复选框
      this.list = tranListToTreeData(res.data)
      console.log(this.list)
    },
    async loadRoleDetailById() { // 复选框 ✔回填
      const res = await getRoleDetail(this.roleId).catch(e => e)
      if (!res.success) return

      // console.log(res.data)
      // 复选框✔回填 setCheckedKeys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      this.$refs.refTree.setCheckedKeys(res.data.permIds) // 接收勾选节点数据的数组
    },
    async hSubmit() { // 点击确定, 请求 给角色分配权限
      // 使用 getCheckedKeys 获取打✔的复选框 id列表
      const permIds = this.$refs.refTree.getCheckedKeys()
      console.log(permIds)
      // 接口需要2个请求体参数: id:当前点击的角色id , permIds: 复选框id列表
      const res = await assignPerm({ id: this.roleId, permIds }).catch(e => e)

      if (!res.success) return this.$message.error(res.message)
      this.$message.success(res.message)

      this.$emit('close')
    }
  }
}
</script>
